﻿import QtQuick
import QtQuick.Controls
import Qt.labs.qmlmodels

Rectangle{
    id: control
    function appendInfo(time:string, str:string, level:int){
        var timeStr = Qt.formatDateTime(time, "yyyy-MM-dd hh:mm:ss");
        str = str.split('\n').join(' ');
        let contenObj = { text:str, textColor: "#BBC4CC"};
        switch(level){
        case 2:
            contenObj.textColor = "#ff0000";
            break;
        case 1:
            contenObj.textColor = "#ffff00";
            break;
        default:
           contenObj.textColor = "#BBC4CC";
        }
        tableModel.insertRow(0, { dateTime:timeStr, conten: contenObj});
        if(tableModel.rowCount > 500){
            tableModel.removeRow(tableModel.rowCount - 1, 1);
        }
    }
    property int currentRow : -1;
    property int hoveredRow : -1;
    color: "transparent"
    Connections{
        target: interaction
        function onLogReport(str:string, level:int){
            appendInfo(new Date(), str, level);
        }
    }

    Rectangle{
        id:header
        width: parent.width
        height: 30
        color: "transparent"
        Row{
            spacing: 3
            Repeater{
                model: ["时间","内容"]
                Rectangle{
                    width: {
                        var w = 0
                        switch(index){
                        case 0: w = 130;break;
                        case 1: w = header.width - 130;break;
                        }
                        return w
                    }
                    height: header.height
                    color: "#6B49719E"
                    border.width: 1
                    border.color: "#848484"
                    Text {
                        text: modelData
                        anchors.centerIn: parent
                        font.pointSize: 12
                        color: "white"
                        font.family: "Microsoft YaHei UI"
                    }
                }
            }
        }
    }
    TableView {
        clip: true
        rowSpacing: 3
        columnSpacing: 3
        anchors.fill: parent
        anchors.topMargin: 30
        ScrollBar.vertical: ScrollBar { }
//        ScrollBar.vertical: ScrollBar {
//            anchors.right:parent.right
//            anchors.rightMargin: 0
//            background: Rectangle{
//                color:"#666666"
//            }
//            contentItem: Rectangle
//            {
//                implicitWidth  : 3
//                implicitHeight : 30
//                radius : 2
//                color  : "#848484"
//            }
//        }

        model: TableModel {
            id:tableModel
            TableModelColumn{
                display: "dateTime"
            }
            TableModelColumn{
                display: "conten"
            }
        }
        delegate: DelegateChooser{
            DelegateChoice{
                column: 0
                delegate: Rectangle{
                    id: colum1
                    color: "#6B012038"
                    implicitWidth: 130
                    implicitHeight: 24
                    border.width: 0
                    border.color: "white"
                    clip: true
                    states:[
                        State{
                            name: "selected"
                            when: currentRow === row
                            PropertyChanges{
                                target: colum1
                                color: "#6b513317"
                            }
                        },
                        State{
                            name: "hovered"
                            when: hoveredRow === row
                            PropertyChanges {
                                target: colum1
                                border.width: 1
                            }
                        }

                    ]
                    Text {
                        text: display
                        anchors.centerIn: parent
                        width: parent.width
                        font.pointSize: 9
                        color: "#BBC4CC"
                        elide: Text.ElideRight
                        leftPadding: 3
                        rightPadding: 3
                    }
                    HoverHandler{
                        id: colum1Hover
                        target: colum1
                        enabled: currentRow !== row
                        onHoveredChanged: {
                            if(hovered){
                                hoveredRow = row;
                            }
                        }
                    }
                    TextMetrics {
                        id: text1Metrics
                        text: display
                    }
                    ToolTip{
                        height: 26
                        visible: colum1Hover.hovered && text1Metrics.width > colum1.width - 6
                        contentItem: Text {
                            text: display
                            color: "#D6D6D6"
                        }
                        background: Rectangle {
                            color: "#222222"
                        }
                    }
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            currentRow = row;
                        }
                    }
                }
            }
            DelegateChoice{
                column: 1
                delegate: Rectangle{
                    id: colum2
                    color: "#6B012038"
                    implicitWidth: header.width - 130
                    implicitHeight: 24
                    border.width: 0
                    border.color: "white"
                    clip: true
                    states:[
                        State{
                            name: "selected"
                            when: currentRow === row
                            PropertyChanges{
                                target: colum2
                                color: "#6b513317"
                            }
                        },
                        State{
                            name: "hovered"
                            when: hoveredRow === row
                            PropertyChanges {
                                target: colum2
                                border.width: 1
                            }
                        }
                    ]
                    HoverHandler{
                        id: colum2Hover
                        target: colum2
                        enabled: currentRow !== row
                        onHoveredChanged: {
                            if(hovered){
                                hoveredRow = row;
                            }
                        }
                    }
                    Text {
                        text: display.text
                        anchors.centerIn: parent
                        width: parent.width
                        font.pointSize: 9
//                        color: "#BBC4CC"
                        color: display.textColor
                        elide: Text.ElideRight
                        leftPadding: 3
                        rightPadding: 3
                        font.family: "Microsoft YaHei UI"
                    }
                    TextMetrics {
                        id: text2Metrics
                        text: display.text
                    }
                    ToolTip{
                        height: 26
                        visible: colum2Hover.hovered && text2Metrics.width > colum2.width - 6
                        contentItem: Text {
                            text: display.text
                            color: "#D6D6D6"
                        }
                        background: Rectangle {
                            color: "#222222"
                        }
                    }
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            currentRow = row;
                        }
                    }
                }
            }
        }
    }
}

